{% extends "base.html" %}

{% block title %}Промокоды{% endblock %}
{% block title_header %}Промокоды{% endblock %}

{% block content %}
<div class="mb-6">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h6 class="text-lg font-semibold">Управление промокодами</h6>
        <button class="btn btn-primary" id="addPromoBtn">
            <i class="bi bi-plus-lg me-2"></i>Добавить промокод
        </button>
    </div>
    <div class="dataTables_wrapper">
        <table id="promocodesTable" class="table table-hover align-middle dataTable">
            <thead>
                <tr>
                    <th style="width: 60px;">ID</th>
                    <th style="width: 200px;">Код</th>
                    <th style="width: 120px;">Скидка</th>
                    <th style="width: 120px;">Использований</th>
                    <th style="width: 120px;">Осталось</th>
                    <th style="width: 150px;">Срок действия</th>
                    <th style="width: 100px;">Статус</th>
                    <th style="width: 120px;">Действия</th>
                </tr>
            </thead>
            <tbody>
                {% for promo in promocodes %}
                <tr>
                    <td class="text-sm">{{ promo.id }}</td>
                    <td class="text-sm">{{ promo.code }}</td>
                    <td class="text-sm">{{ promo.discount }}%</td>
                    <td class="text-sm">{{ promo.usage_count }}</td>
                    <td class="text-sm">{{ promo.usage_limit - promo.usage_count }}</td>
                    <td class="text-sm">{{ promo.created_at }}</td>
                    <td>
                        {% if promo.is_active %}
                        <span class="text-sm">Активен</span>
                        {% else %}
                        <span class="text-sm" style="color: rgb(235, 137, 137);">Отключен</span>
                        {% endif %}
                    </td>
                    <td>
                        <div class="d-flex gap-2">
                            <button class="btn btn-sm edit-btn" style="color: white;" data-id="{{ promo.id }}">
                                <i class="bi bi-pencil-square"></i>
                            </button>
                            <button class="btn btn-sm delete-btn" style="color: white;" data-id="{{ promo.id }}">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Модальное окно -->
<div class="modal fade" id="promoModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Добавление промокода</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="promoForm" class="needs-validation" novalidate>
                    <input type="hidden" id="promoId">
                    
                    <div class="mb-3">
                        <label for="promocod" class="form-label">Промокод</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="promocod" required>
                            <button class="btn btn-secondary" type="button" id="generatePromoBtn">
                                <i class="bi bi-magic"></i> Сгенерировать
                            </button>
                        </div>
                        <div class="invalid-feedback">
                            Пожалуйста, введите промокод
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="usage_limit" class="form-label">Лимит активаций</label>
                        <input type="number" class="form-control" id="usage_limit" min="1" required>
                        <div class="invalid-feedback">
                            Пожалуйста, укажите лимит активаций (минимум 1)
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="discount" class="form-label">Процент скидки</label>
                        <div class="input-group">
                            <input type="number" class="form-control" id="discount" min="0" max="100" required>
                            <span class="input-group-text">%</span>
                        </div>
                        <div class="invalid-feedback">
                            Пожалуйста, укажите процент скидки (от 0 до 100)
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="is_active" checked>
                            <label class="form-check-label" for="is_active">Активен</label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                <button type="button" class="btn btn-primary" id="saveBtn">
                    <i class="bi bi-save"></i> Сохранить
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно удаления -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Подтверждение удаления</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Вы действительно хотите удалить этот промокод?</p>
                <p class="mb-0"><strong>Промокод:</strong> <span id="deletePromoCode"></span></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
                    <i class="bi bi-trash"></i> Удалить
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    // Инициализация DataTables
    const table = $('#promocodesTable').DataTable({
        language: {
            "processing": "Подождите...",
            "search": "Поиск:",
            "lengthMenu": "_MENU_ записей",
            "info": "Записи с _START_ до _END_ из _TOTAL_",
            "infoEmpty": "Записи с 0 до 0 из 0 записей",
            "infoFiltered": "(отфильтровано из _MAX_ записей)",
            "loadingRecords": "Загрузка записей...",
            "zeroRecords": "Записи отсутствуют.",
            "emptyTable": "В таблице отсутствуют данные",
            "paginate": {
                "first": "«",
                "previous": "‹",
                "next": "›",
                "last": "»"
            }
        },
        order: [[0, 'desc']],
        pageLength: 10,
        responsive: true,
        autoWidth: false,
        columnDefs: [
            { orderable: false, targets: 7 }
        ]
    });

    // Инициализация модальных окон
    const promoModal = new bootstrap.Modal(document.getElementById('promoModal'));
    const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
    let currentPromoId = null;
    let isCreating = false;

    // Генерация промокода
    function generatePromoCode(length = 8) {
        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
        let result = '';
        for (let i = 0; i < length; i++) {
            result += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        return result;
    }

    // Обработчик кнопки генерации
    $('#generatePromoBtn').click(function() {
        $('#promocod').val(generatePromoCode());
    });

    // Обработчик кнопки добавления
    $('#addPromoBtn').click(function() {
        isCreating = true;
        currentPromoId = null;
        $('#modalTitle').text('Создание промокода');
        $('#promoForm').trigger('reset');
        $('#promoForm').removeClass('was-validated');
        $('#promocod').prop('readonly', false);
        promoModal.show();
    });

    // Обработчик кнопки редактирования
    $(document).on('click', '.edit-btn', async function(e) {
        e.preventDefault();
        isCreating = false;
        currentPromoId = $(this).data('id');
        $('#modalTitle').text('Редактирование промокода');
        $('#promoForm').removeClass('was-validated');
        
        try {
            const response = await fetch(`/admin/promocodes/edit/${currentPromoId}`);
            if (!response.ok) {
                throw new Error('Ошибка при получении данных');
            }
            const promo = await response.json();
            if (promo.error) {
                throw new Error(promo.error);
            }
            
            $('#promoId').val(promo.id);
            $('#promocod').val(promo.code).prop('readonly', true);
            $('#usage_limit').val(promo.usage_limit);
            $('#discount').val(promo.discount);
            $('#is_active').prop('checked', promo.is_active);
            
            promoModal.show();
        } catch (error) {
            console.error('Ошибка при получении данных:', error);
            alert('Ошибка при получении данных промокода: ' + error.message);
        }
    });

    // Обработчик кнопки удаления
    $(document).on('click', '.delete-btn', async function(e) {
        e.preventDefault();
        currentPromoId = $(this).data('id');
        const promoCode = $(this).closest('tr').find('td:eq(1)').text();
        $('#deletePromoCode').text(promoCode);
        deleteModal.show();
    });

    // Обработчик подтверждения удаления
    $('#confirmDeleteBtn').click(async function() {
        try {
            const response = await fetch(`/admin/promocodes/delete/${currentPromoId}`, {
                method: 'POST'
            });

            if (!response.ok) {
                throw new Error('Ошибка при удалении');
            }

            const result = await response.json();
            if (result.error) {
                throw new Error(result.error);
            }

            deleteModal.hide();
            window.location.reload();
        } catch (error) {
            console.error('Ошибка при удалении:', error);
            alert('Ошибка при удалении промокода: ' + error.message);
        }
    });

    // Обработчик сохранения
    $('#saveBtn').click(async function() {
        const form = document.getElementById('promoForm');
        if (!form.checkValidity()) {
            form.classList.add('was-validated');
            return;
        }

        const formData = {
            code: $('#promocod').val(),
            usage_limit: parseInt($('#usage_limit').val()),
            discount: parseInt($('#discount').val()),
            is_active: $('#is_active').is(':checked')
        };

        try {
            const url = isCreating ? '/admin/promocodes/create' : `/admin/promocodes/edit/${currentPromoId}`;
            const response = await fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(formData)
            });

            if (!response.ok) {
                throw new Error('Ошибка при сохранении');
            }

            const result = await response.json();
            if (result.error) {
                throw new Error(result.error);
            }

            promoModal.hide();
            window.location.reload();
        } catch (error) {
            console.error('Ошибка при сохранении:', error);
            alert('Ошибка при сохранении данных: ' + error.message);
        }
    });
});
</script>
{% endblock %}